<template>
    <div class="Files-intro">
        西风吹老洞庭波，一夜湘君白发多。
    </div>
    <div class="Files-container">
        <div class="file-box" v-for="(item,index) in files" :key="index">
            <div class="img-box" @click="to(item)">
                <img  :src="item.Src"/>
            </div>
            <p>{{item.Name}}</p>
        </div>
    </div>
</template>

<script>
import { fetchFiles } from '../Api'
export default {
    data() {
        return {
            src: [],
            files: [],
        }
    },
    created() {
        this.src = [require("@/assets/book1.png"),require("@/assets/book2.png"),
        require("@/assets/book3.png")]
        var params = {}
        params.path = `article\\${this.$route.params.name}`
        fetchFiles(params).then(res=>{
            this.files = JSON.parse(res.data.files)
            for(let i=0;i<this.files.length;i++)
                this.files[i] = {Name:this.files[i].Name,Path:this.files[i].Path,Src:this.src[Math.floor(Math.random()*3)]}
        }).catch(err=>{
            console.log(err)
        })
    },
    methods: {
        to(item) {
            let s = item.Path.split("\\")
            console.log(s);
            this.$router.push(`/note/${s[1]}/${s[2].slice(0,s[2].length-3)}`)
        }
    }
}
</script>

<style lang="less" scoped>
    .Files-intro {
        font-family: 'xingkai';
        font-size: 30px;
        text-align: center;
    }
    .Files-container {
        display: flex;
        flex-wrap: wrap;
        padding-left: 150px;
        .file-box {
            text-align: center;
            margin-right: 80px;
            margin-top: 50px;
            p {
                margin-right: 8px;
                width :100px;
                font-size: 14px;
                line-height: 14px;
                height: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .img-box {
                width: 100px;
                img {
                    width: 100%;
                }
            }
            .img-box:hover {
                cursor: pointer;
            }
        }
    }
</style>